<template>
  
  <div>
    <!-- 添加出库信息 -->
    <el-form
      ref="form"
      label-width="80px"
      style="display: flex; flex-wrap: wrap"
    >
      <div style="display: flex; margin-top: -50px; margin-left: -250px">
        <p style="display: flex; width: 400px">
          领用小班&nbsp;

            <el-select v-model="outClass" placeholder="请选择">
              <el-option
                v-for="item in this.ClassList"
                :key="item.className"
                :label="item.className"
                :value="item.className"
              >
              </el-option>
            </el-select>
        </p>
        <p style="display: flex; width: 400px">出库人:{{ moveList.moveUser }}<br /></p>
      </div>
    </el-form>

    <el-table
      :data="meOutList"
      style="width: 100%"
      height="300"
      :default-sort="{ prop: 'meId' }"
      @row-click="getId"
    >
            <el-table-column property="agentiaId" width="50"> </el-table-column>
            <el-table-column property="agentiaName" label="名称" width="120">
            </el-table-column>

            <el-table-column property="agentiaCategory" label="类别" width="80">
            </el-table-column>

            <el-table-column
              property="agentiaType"
              label="防治类型"
              width="130"
            >
            </el-table-column>

            <el-table-column prop="detailsNum" label="领用数量"
              >onSelectAll
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.detailsBean.detailsNum"
                ></el-input>
              </template>
            </el-table-column>
    </el-table>

    <!-- <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
       
      </div> -->

    <div style="text-align: left">
      
      <el-button
        type="primary"
        @click="dialogFormVisible = true"
        style="
          width: 107px;
          margin-right: 30px;
          margin-left: 70px;
          border: 1px solid rgb(164, 171, 171);
          color: rgb(83, 79, 79);
          font-weight: bold;
          font-size: 13px;
        "
        size="small"
        plain
        >添加物品
        </el-button>

      <!-- 添加物品 -->
      <el-dialog
        title="添加物品"
        width="850px"
        :visible.sync="dialogFormVisible"
        :before-close="handleClose"
      >
        <div>
          <div style="width: 100%; margin-top: -110px">
            <div>
              <el-table
                ref="multipleTable"
                tooltip-effect="dark"
                @selection-change="handleSelectionChange"
                :data="agtObj.records"
                highlight-current-row
                style="
                  width: 600px;
                  height: 238px;
                  border: 1px solid #dcdfe6;
                  margin-top: 100px;
                "
              >
                <el-table-column type="selection" width="70"> </el-table-column>
                <el-table-column prop="meName" label="物品名称" width="130">
                </el-table-column>
                <el-table-column prop="meSort" label="类型" width="130">
                </el-table-column>
                <el-table-column prop="meType" label="防治类型" width="130">
                </el-table-column>
                <el-table-column prop="meUse" label="主要用途" width="130">
                </el-table-column>
              </el-table>

              <!-- 页码 -->
              <el-pagination
                background
                layout="prev, pager, next"
                :total="agenObj.pages * 10"
                @click="get()"
                @current-change="handleChange"
                style="margin-left: 100px; margin-bottom: 100px"
              >
              </el-pagination>
            </div>
          </div>
            <!-- 物品模糊查询 -->
          <div style="margin-top: -80px">
          <p>
            物品名称：
            <input type="text" v-model="agentiaName" />
            <span>
              <span style="margin-left: 100px"> 类型：</span>

              <select v-model="meSort" style="margin-left: 20px">
                <option></option>
                <option>药剂</option>
                <option>器械</option>
              </select>
            </span>
          </p>
          <p style="margin-top: 30px">
            防治类型：
            <select v-model="meType" style="margin-left: 20px">
              <option></option>
              <option>虫害</option>
              <option>病害</option>
            </select>
          </p>

          <p style="margin-top: 60px">
            <span slot="footer" class="dialog-footer">
              <el-button type="primary" @click="get()"
                style="margin-left: 160px; margin-bottom: 50px">查 询
              </el-button>
              <el-button type="primary" @click="add()"
                style="margin-left: 160px; margin-bottom: 50px">领 取
              </el-button>
            </span>
          </p>
          </div>


        </div>
      </el-dialog>

      <el-button
        type="primary"
        @click="del()" 
        style="
          width: 107px;
          margin-right: 30px;
          margin-left: 10px;
          border: 1px solid rgb(164, 171, 171);
          color: rgb(83, 79, 79);
          font-weight: bold;
          font-size: 13px;
        "
        size="small"
        plain
        >移除物品
        </el-button>

        <el-button
        type="primary"
        @click="addOut()" 
        style="
          width: 107px;
          margin-right: 30px;
          margin-left: 10px;
          border: 1px solid rgb(164, 171, 171);
          color: rgb(83, 79, 79);
          font-weight: bold;
          font-size: 13px;
        "
        size="small"
        plain
        >出库
        </el-button>

    </div>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from "vuex";
export default {
  data() {
    return {
      dialogFormVisible: false,
      dialogVisible: false,
      dia: false,
      dialog:false,
      formLabelWidth: "70px",
      agentiaId: "",
      agentiaName: "", //物品名称
      agentiaType: "", //类别
      agentiaCategory: "", //类型
      detailsNum: "", //领用数量
      ClassList: [],
      meOutList: [],
      list: [],
      outClass: "",
      outTime: "",
      outMan: "root",
      pageNo: "",
      pages: "",
    };
  },
  computed: {
    ...mapState("mov", ["cutObj", "param1"]),
    ...mapState("shop", ["agtObj", "param"]),
  },
  methods: {

    ...mapMutations("mov", ["setParam1"]),
    ...mapActions("mov", ["findByItem"]),
    ...mapActions("shop", ["findCut"]),
    ...mapMutations("shop", ["setParam"]),

    async addOut(){
       let parmaObj = {

        moveClass: this.outClass,
        moveUser: this.moveUser,
        agentiaBeanList:this.agentiaBeanList
        
      };
      let info = await this.ajax.postSubmit("/api/move/addMove", parmaObj);

      console.log(info);
      if (info != null) {
        alert("添加成功！");
      } else {
        alert("不能为空！");
      }
      this.dialogVisible = false;
      this.findAllOut();
    },
    async showClassName() {
      this.ClassList = await this.ajax.getSubmit("/api/cls/findAllCls");
    },
    handleSelectionChange(val) {
      console.log(val);
      for (let i = 0; i < val.length; i++) {
        if (val[i].num == null) {
          val[i].num = 1;
        }
      }
      this.list = val;
    },
    add() {
        if(this.agentiaBeanList.length==0){
            this.agentiaBeanList = this.agentiaBeanList.concat(this.list)
        }else{
            let flag = false;
            for(let i = 0;i<this.list.length;i++){
                for(let j=0;j<this.agentiaBeanList.length;j++){
                    if(this.list[i].agentiaId==this.list[j].agentiaId){
                        this.agentiaBeanList[j].agentiaId = parseInt(this.agentiaBeanList[j].num)+1
                        flag = false
                        break
                    }else{
                        flag = true
                    }
                }
                if(flag){
                    this.meOutList.push(this.list[i])
                }
            }
        }
        this.$refs.multipleTable.clearSelection();
        console.log(this.list)
        console.log(this.meOutList)
        this.dialogFormVisible=false
    },
    async del(){
        if (this.meId == 0) {
        alert("请选择");
        return;
      }
      for (let i = 0; i < this.meOutList.length; i++) {
        if (this.meOutList[i].meId == this.meId) {
          this.meOutList.splice(i, 1);
          return;
        }
      }
    },
    get() {
      let paramObj = this.medicineParam;
      paramObj.meName = this.meName;
      paramObj.meType = this.meType;
      paramObj.meSort = this.meSort;
      // 把最新的信息装入 store中的 param对象中
      this.setMedicineParam(paramObj);
      this.findMedicineName();
    },
    getId(row) {
      this.meId = row.meId;
    },
    handleTableRow(row) {
      console.log(row.meId);
      this.meId = row.meId;
    },
    handleCurrentChange(val) {
      this.pageNo = val;
      this.getList();
    },
    handleChange(index) {
      console.log(`当前页: ${index}`);
      this.pageNo = index;
      console.log("页码" + this.pageNo);
      this.cut(this.pageNo);
    },
    cut(pageNo) {
      let paramObj = this.medicineParam;
      paramObj.pageNo = pageNo;
      this.setMedicineParam(paramObj);
      this.findAllMedicine();
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
  },
  created() {
    this.showClassName();
    this.findByItem();
    this.findCut();
  },
};
</script>

<style>

</style>